<template>
    <div class="buy-risk-box">
        <div class="tip-box">
            <p class="tip-title">{{ buyRiskObj.popUpWinTitle || '' }}</p>
            <p class="tip-text">{{ buyRiskObj.popUpWinContent || '' }}</p>
            <p v-if="buyRiskObj.enAgree" class="tip-desc">
                <van-checkbox v-model="checked" shape="square"></van-checkbox>{{
                    buyRiskObj.popUpWinAuthDesc || '' }}
            </p>
            <div v-if="buyRiskObj.enAgree" class="tip-btn-box">
                <span class="cancel" @click="btnEvent(0)">不同意</span>
                <span class="confirm" @click="btnEvent(1)">同意</span>
            </div>
            <div v-else class="tip-btn-box">
                <span class="confirm" @click="btnEvent(1)">我知道了</span>
            </div>
        </div>
    </div>
</template>

<script>
import { userCheckClickGoodsRiskTip } from '@/util/api.js'
export default {
    props: {
        buyRiskObj: Object,
        shoppingLinkInfo: Object,//当前商品信息
    },
    data() {
        return {
            roomId: this.$route.params.roomid || this.$route.params.id, //房间id
            checked: false,//是否勾选
            type: null,//类型: 0-直播间,1-回看
        }
    },
    created() {
        this.type = window.location.href.includes('liveRoom') ? 0 : 1
    },
    activated: function () {
    }
    ,
    methods: {
        //点击记录
        async btnEvent(i) {
            if (i) {//我知道了 &  同意 按钮
                if (this.buyRiskObj.enAgree && !this.checked) {
                    fun.toastMessage('请勾选同意授权');
                    return
                }
                const check = this.checked ? 1 : 0;
                try {
                    const msgData = await userCheckClickGoodsRiskTip(this.roomId, this.type, check, i)
                    const { code,  msg } = msgData.data;
                    if (code === '000000') {                      
                            this.$emit('formChildMsg', {
                                type: 'closeBuyRisk',
                                data: 'ruan'
                            })
                            fun.shoppingLink(this.shoppingLinkInfo)
                    } else {
                        fun.toastMessage(msg)
                    }
                } catch (error) {
                    console.log(error);
                }

            } else {//取消 
                this.$emit('formChildMsg', {
                    type: 'closeBuyRisk',
                    data: 'ruan'
                })
            }
        },
    }
}
</script>

<style lang="less" scoped>
.buy-risk-box {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0 !important;
    left: 0;
    bottom: 0;
    z-index: 2600;
    display: flex;
    justify-content: center;
    align-items: center;

    .tip-box {
        width: 600px;
        padding: 40px;
        background: rgba(246, 246, 246, 1);
        border-radius: 15px;
        position: relative;
    }

    .tip-title {
        font-size: 36px;
        font-weight: 500;
        color: #333333;
        text-align: center;
        margin-bottom: 45px;
    }

    .tip-text {
        max-height: 400px;
        width: 520px;
        margin-bottom: 20px;
        font-size: 28px;
        font-weight: 400;
        color: #666666;
        line-height: 48px;
        overflow-y: scroll;
    }

    .tip-btn-box {
        width: 100%;
        height: 88px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        span {
            height: 100%;
            width: 220px;
            text-align: center;
            line-height: 88px;
            background: linear-gradient(270deg, #307CFF 0%, #5ED4FF 100%);
            border-radius: 40px;
            font-size: 28px;
            font-weight: 400;
            color: #FFFFFF;
        }

        .cancel {
            color: #307CFF;
            background: rgba(186, 222, 255, 0.35)
        }
    }

    .tip-desc {
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 400;
        color: #317DFF;
        line-height: 32px;

        .van-checkbox {
            display: inline-block;
            vertical-align: text-top;

            /deep/.van-checkbox__icon {
                margin-right: 5px;
                font-size: 27px;
            }
        }
    }
}
</style>
